<template>
	<div style="padding:0 37px 0 44px">
		<div class="breadcrumb-father">
      <div class="new-breadcrumb">
        
				<router-link  :to="{path:'/welcome'}">
          <img src="../../../assets/imgs/Home.png" alt="">
        </router-link>
        <!-- <a href="javascript:void(0)">
        </a> -->
          <span>{{$t('index.approval')}}</span>
        <span class="arrow">></span>
        <!-- <a href="javascript:void(0)">
        </a> -->
          <span>{{$t('shop.shopApproval')}}</span>
      </div>
    </div>
	
		<div class="card-table">
			<div class="card-table-title">
				<svg aria-hidden="true" class="svg-icon svg-title-icon">
					<use xlink:href="#icon-dianpushenhe"></use>
				</svg>
				<span>{{$t('mer.PendingShopApproval')}}</span>
			</div>
			<div class="table-border">
				<!-- <div class="table-head">{{$t('mer.PendingShopApproval')}}</div> -->
				<el-table border :data="shopAuditDatas" @cell-mouse-enter="showHandle" @cell-mouse-leave="hiddenHandle" height=500 v-loading="loading" :element-loading-text="$t('button.loading')" element-loading-background="rgba(255, 255, 255, 1)">
					<el-table-column type="index" :label="$t('index.Number')" width=80></el-table-column>
					<el-table-column prop="shopName" :label="$t('agent.Name')"></el-table-column>
					<el-table-column prop="name" :label="$t('mer.Merchant')"></el-table-column>
					<el-table-column prop="address" :label="$t('agent.Address')"></el-table-column>
					<el-table-column prop="remarks" :label="$t('mer.ApprovalItem')" :formatter="shopState"></el-table-column>
					<el-table-column fixed="right" class-name="handle-hidden-1 animate_td">
					    <template slot-scope="scope">
		                  <a class="svg-link-class" @click="shopAuditBtn(scope.row.shopId,scope.row.remarks,scope.row.shopName)">
		                    <svg aria-hidden="true" class="svg-icon svg-action-icon">
		                      <use xlink:href="#icon-shenhe"></use>
		                    </svg>
		                  </a>
						</template>
					</el-table-column>
				</el-table>
			</div> 
		</div>
		<div class="pagination-container">
			<el-pagination @size-change="handleSizeChange" background @current-change="handleCurrentChange" :current-page.sync="shopData.page" :page-sizes="[15,20,30,50]" :page-size="shopData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="res.total"></el-pagination>
		</div>
	</div>
	
</template>

<script>
	import { allShopAjax,singleShop,ShopAudit } from 'api/audit/shopAudit/index';
	export default{
		name:'shopAudit',	
		data(){
			return {
				shopAuditDatas:[],
				res:[],
				shopData:{
					page: 1 ,
					pageSize: 15 ,
				},
				companyId:localStorage.getItem('companyId'),
				// industryId:null,
				tableIndex: null,
				oldPage: null,
				loading: true,
			}
		},
		watch:{
		  'shopData.page':function(newVal,oldVal){
		      this.oldPage = oldVal;
		  },
		},
		created(){
			if(localStorage.getItem('shopData')){
				this.shopData = JSON.parse(localStorage.getItem('shopData'));
			}
			this.ajaxShopList(this.shopData);
			$("#z_auditManage .el-menu a li:eq(1)").addClass('is-active');
		},
		mounted(){
			
		},
		methods:{
			showHandle(row, column, cell, event){
		      for(let i = 0;i<this.shopAuditDatas.length;i++){
		        if(this.shopAuditDatas[i].shopId === row.shopId){
		          this.tableIndex = i;
		          const table_row = $(".el-table__fixed-right").find('.el-table__row')[i];
		          $(table_row).find('td:last').removeClass('handle-hidden-1');
		          // $(".animate_td .cell").css("right","-120px");
		          $(".el-table__fixed-right").addClass("fixed-column-1");
		          // 判断项目数目是否导致滚动条出现
		          if(this.shopAuditDatas.length <= 15){
						$(".el-table__fixed-right").addClass("right-zero");
				  }else{
				  		$(".el-table__fixed-right").removeClass("right-zero");
				  }

		          $(".el-table__fixed-right").css("z-index","22");
		          var action_div = $(table_row).find('td:last').children("div");
		          $(action_div).stop().animate({"right": "0"});

		        }
		      }
		    },
		    hiddenHandle(row, column, cell, event){
		    	const table_row = $(".el-table__fixed-right").find('.el-table__row')[this.tableIndex];
		      	$(".el-table__fixed-right").css("z-index","0");
		    	var action_div = $(table_row).find('td:last').children("div");
		    	$(action_div).stop().animate({"right": "-120px"});

		    },
			shopState(row){
				let remarks = row.remarks;
				if(remarks === '0' ){
					return remarks = this.$t('mer.NewShop');
				}else if(remarks === '1' ){
					return remarks = this.$t('mer.Amendment');
				}
			},
			ajaxShopList(value,str){

				const _that = this;

				_that.loading = true;

				if( str == 'CurrentChange' ){
				  // 获取所有分页项数，循环去除选中样式，对点击前的项数添加选中样式
				  let obj = $('.el-pager .number');
				  for( let i = 0; i < obj.length; i++){
				      if($(obj[i]).html() == this.oldPage) {
				        $(obj[i]).addClass('active');
				      } else {
				        $(obj[i]).removeClass('active');
				      }
				  }
				}

				value.companyId = localStorage.getItem('companyId');
				allShopAjax(value).then(res=>{
					this.shopAuditDatas=res.value.rows;
					this.res = res.value;

					// 如果是分页触发，循环去除选中样式，对点击后的项数添加选中样式
					if( str == 'CurrentChange' ){
					  let obj = $('.el-pager .number');
					  for( let i = 0; i < obj.length; i++){
					      if($(obj[i]).html() == this.shopData.page) {
					        $(obj[i]).addClass('active');
					      } else {
					        $(obj[i]).removeClass('active');
					      }
					  }
					}

					setTimeout(function (param) { 
					  const td_last_child = $(".el-table__body-wrapper tr td:last-child");
					  for(let i=0;i<td_last_child.length;i++){
					    $(td_last_child[i]).removeClass('handle-hidden-1');
					  }

					  _that.loading = false;
					  
					},500)

					if(res.value.remarks === '0'){
						this.shopAuditDatas.remarks=this.$t('mer.NewShop');
					}
					if(res.value.remarks === '1'){
						this.shopAuditDatas.remarks=this.$t('mer.Amendment');
					}
				})
			},
			//店铺相片
			shopPhotos(res){
				this.shopAuditDatas.storePhotosUrl = res.value[0];
			},
			//店铺审核按钮
			shopAuditBtn(shopId,remarks,shopName){
				// console.log(this.$router);
				localStorage.setItem('shopData',JSON.stringify(this.shopData));
				this.$router.push({ path: "/shopAuditDetails",query:{ shopId:shopId,remarks:remarks,name:shopName } });
			},
			
			 //pageSize 改变时会触发
			handleSizeChange(val){
				this.shopData.pageSize = val;
				this.ajaxShopList(this.shopData);
			},
			//currentPage 改变时会触发
			handleCurrentChange(val){
				this.shopData.page = val;
				this.ajaxShopList(this.shopData,'CurrentChange');
			}
		}
	}
</script>

<style lang="scss" scoped>
// .el-table::before{
// 	height: 0;
// }
// @media only screen and (max-width: 1920px) {
//   .returnTop {
//     font-size: 12px;
//     font-family: SourceHanSansCN-Bold;
//     color: #4964cf;
//     position: absolute;
//     top: 18px;
//     right: 16px;
//     font-weight: bold;
//     i {
//       display: inline-block;
//       width: 10px;
//       height: 10px;
//       img {
//         width: 100%;
//         height: 100%;
//       }
//     }
//   }
// }
</style>